<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> ecs列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" style="padding-bottom: 10px;">
        <el-button type="primary" class="handle-del mr10" @click="installHadoop()">创建Hadoop</el-button>
      </div>
      <div>所有机器密码：Hadoop123456</div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header">
        <el-table-column prop="instance_name" label="实例名称"></el-table-column>
        <el-table-column prop="ip" label="IP"></el-table-column>
        <el-table-column prop="region_id" label="区域ID"></el-table-column>
        <el-table-column prop="image_id" label="镜像ID"></el-table-column>
        <el-table-column prop="task_remark" label="任务进度"></el-table-column>

        <el-table-column label="操作">
<!--          <template v-slot="scope">-->

<!--          </template>-->
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "aliyun_ecs_list",
  data(){
    return{
      tableData: [],
      intervalId:null,
    }
  },
  created() {
    //this.getContainer()
    this.ecsList()
    this.dataRefreh()
  },
  methods: {
    ecsList(){
      axios.get('/aliyunEcs/ecsList',{
        params:{
          page:1,
          pageSize:1000
        }
      })
        .then((response)=>{
          if(response.data.code == 0){
            this.tableData = response.data.data
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    installHadoop(){
      axios.get('/aliyunEcs/install_hadoop')
          .then((response)=>{
            if(response.data.code == 0){
              this.ecsList()
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.ecsList(); //加载数据函数
      }, 3000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    }
  }
}
</script>

<style scoped>

</style>